<!DOCTYPE html>
<html>
<head>
<title>Hello Android</title>
<link rel="stylesheet" type="text/css"
	href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/storage.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-10.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/pushNotification.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>


<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$("#regi").click(function() {
			app.initialize();
		});
		$("#option").click(function() {
			$.mobile.changePage( "#settingspage", {
			    transition: "pop"
			  	});	
			/* $("#option").click(function() {
				$.mobile.changePage( "#listdetailpage", {
				    transition: "pop"
				  	});	 */
		});
	});
</script>
</head>
<body>
	<!-- index page -->
	<div data-role="page" id="indexpage">
		<div data-role="header" data-theme="b" data-icon="delete">
			<h1>Information</h1>
			<a href="index.html" data-icon="star" class="ui-btn-left" id="regi">Register</a>
			<a href="#" data-icon="gear" class="ui-btn-right" id="option">Options</a>
		</div>

		<div data-role="collapsibleset" data-theme="b" data-content-theme="b">
			<div data-role="collapsible">
				<h2>All list</h2>

				<ul data-role="listview" id="all_results" data-filter-theme="a"
					data-divider-theme="b">
				</ul>
			</div>
		</div>
	</div>

	<!-- **************************************ListPage******************************* -->
	<div data-role="page" id="listpage">
		<div data-role="header" data-theme="b">
			<h1>List Page</h1>
			<a href="index.html" data-icon="delete" class="ui-btn-left">Back</a>
		</div>
		<ul data-role="listview" id="all_results_comp" data-filter-theme="a"
					data-divider-theme="b">
				</ul>
	</div>
<!-- ********************************************listdetailpage********************************************** -->
	<div data-role="page" id="listdetailpage">
		<div data-role="header" data-theme="b" >
			<h1>Detail Page</h1>
			<a href="#listpage" data-icon="delete" class="ui-btn-left">Back</a>
		</div>
		
		<div data-role="content" data-theme="b" align="center">
		<img alt="company_img" src="goa_beach.jpg" width="257" height="257" id="listdetailpageimage"/>
		</div>
		<h2 id="listdetailpagecompany">Company detail</h1>
		
		<h2 id="listdetailpageoffer">coupon detail</h1>
		
		<h2 id="listdetailpagevalidity">validity detail</h1>
		</div>





	<!-- **************************************SettingsPage******************************* -->
	<div data-role="page" id="settingspage">
		<div data-role="header" data-theme="b" data-icon="delete">
			<h1>Setting</h1>
			<a href="index.html" data-icon="delete" class="ui-btn-left">Back</a>
			<a href="index.html" data-icon="check" class="ui-btn-right">Save</a>
		</div>

		<form>
			<ul data-role="listview" data-inset="true">
				<li class="ui-field-contain"><label for="name2">Company Name:</label> <input type="text" name="name2" id="name2" value=""
					data-clear-btn="true"></li>
				<li class="ui-field-contain"><label for="textarea2">Offer keyward:</label>
					<textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
				</li>
				<li class="ui-field-contain">
				<label for="flip1">Settings :</label>
				 <select name="flip1" id="flip1" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
				</select></li>
				<li class="ui-field-contain">
				<label for="flip2">Reminder :</label>
				 <select name="flip2" id="flip2" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
				</select></li>
				<li class="ui-field-contain"><label for="slider2">Filter No of data:</label>
					<input type="range" name="slider2" id="slider2" value="0" min="0"
					max="100" data-highlight="true"></li>
				<li class="ui-field-contain"><label for="select-choice-1"
					class="select">Choose coupon validity:</label> <select
					name="select-choice-1" id="select-choice-1">
						<option value="standard">today</option>
						<option value="rush">tomorrow</option>
						<option value="express">Within a week</option>
						<option value="overnight">With in a month</option>
				</select></li>
			</ul>
		</form>
	</div>

</body>
</html>
